<template>
	<tm-app ref="app" class="bg" :transparent='true'>

			<view style="M1">
				<view class='header-card fixed fulled flex flex-col flex-between'>
					<tm-text label="乌豚邦喂养端" :font-size="48" class="ma-40 text-weight-b" color="#333"
						style="letter-spacing:4rpx;"></tm-text>
					<view class="info">
						<view class='flex px-30' style='align-items: center;'>
							<view class='mr-20'>
								<tm-avatar :img=" userInfo?.avatar ? userInfo?.avatar:'../../../static/avator.jpeg'" :round="15" :size='130'></tm-avatar>
							</view>
							<view class='ml-10' v-if="userInfo">
								<tm-text :lineHeight="58" :font-size="40" :label="userInfo.name"></tm-text>
								<tm-text :font-size='34' :label='userInfo.phone'></tm-text>
								<tm-text :font-size="32" :label='userInfo.site.name'></tm-text>
							</view>
						</view>
						<!-- <view>
							<view class="flex flex-col flex-center">
								<tm-statistic :fontSize="50" color="orange" :endVal="completeStatus?.total" style="display: flex;justify-content: flex-start;"></tm-statistic>
								<tm-text label="今日工单数(个)" :fontSize="38" color="#ff8e75"/>
							</view>
						</view> -->
					</view>
					
				</view>
			</view>
			
			
			<view style="margin-top: 370rpx;">
			<view v-if="completeStatus" class="workInfo" style=" margin: 0 auto; width: 90%;border-radius: 20rpx;padding:20rpx; padding-top:12rpx;background-image: linear-gradient(45deg, #dfea3ec4 , transparent);">
				<!-- <view style="display: flex;">
					<view style="display: flex;justify-content: flex-start;align-items: center;border-right:2px solid #a59a9a78">
						<tm-text label="已完成" :fontSize="32"/>
						<tm-statistic :fontSize="42" color="green" :endVal="completeStatus?.cont"/>
					</view>
					<view style="display: flex;justify-content: flex-end;align-items: center;margin-left: 8rpx;">
						<tm-text label="未完成" :fontSize="32"/>
						<tm-statistic :fontSize="42" color="grey" :endVal="completeStatus?.toBeContinued"/>
					</view>
				</view> -->
				<view>
					<view class="mb-16">
						<tm-grid :width="638" :col="3" transprent>
							<tm-grid-item>
								<tm-statistic :fontSize="42" prefix="+" color="#ff8e75" :endVal="completeStatus?.total || 0"/>
								<tm-text :fontSize="32" label="今日工单数"></tm-text>
							</tm-grid-item>
							<tm-grid-item>
								<tm-statistic :fontSize="42" prefix="+" color="rgb(79 156 29)" :endVal="completeStatus?.cont || 0"/>
								<tm-text :fontSize="32" label="已完成"></tm-text>
							</tm-grid-item>
							<tm-grid-item>
								<tm-statistic :fontSize="42" prefix="-" color="grey" :endVal="completeStatus?.toBeContinued || 0"/>
								<tm-text :fontSize="32" label="未完成"></tm-text>
							</tm-grid-item>
						</tm-grid>
					</view>
					<tm-grid :width="638" :col="5" transprent>
						<tm-grid-item>
							<tm-statistic :fontSize="40" prefix="+" color="#ff8e75" :endVal="completeStatus?.enter || 0"/>
							<tm-text :fontSize="32" label="入栏"></tm-text>
						</tm-grid-item>
						<tm-grid-item>
							<tm-statistic :fontSize="40" prefix="+" color="#ff8e75" :endVal="completeStatus?.feed || 0"/>
							<tm-text :fontSize="32" label="喂食"></tm-text>
						</tm-grid-item>
						<tm-grid-item>
							<tm-statistic :fontSize="40" prefix="+" color="#ff8e75" :endVal="completeStatus?.serve || 0"/>
							<tm-text :fontSize="32" label="服务"></tm-text>
						</tm-grid-item>
						<tm-grid-item>
							<tm-statistic :fontSize="40" prefix="+" color="#ff8e75" :endVal="completeStatus?.out || 0"/>
							<tm-text :fontSize="32" label="出栏"></tm-text>
						</tm-grid-item>
						<tm-grid-item>
							<tm-statistic :fontSize="40" prefix="+" color="#ff8e75" :endVal="completeStatus?.sickness || 0"/>
							<tm-text :fontSize="32" label="治疗"></tm-text>
						</tm-grid-item>
					</tm-grid>
				</view>
			</view>


			<view class="M2" >
				<view style="width: 700rpx;height: 100%;box-sizing: border-box;"
					class="flex flex-row flex-wrap flex-between px-20 py-15">




					<tm-badge :count="subBadge.enter" :fontSize="26" :maxCount="99" color="red" linear="top" @click="testPush">
						<view @click="gotoList('/pages/inclub/list/list')" class="item">
							<tm-icon name="tmicon-right-arrow-rect" :font-size="70" />
							<tm-text class="title" label="入栏工单" :font-size="38" />
						</view>
					</tm-badge>



					<tm-badge :count="subBadge.feeding" :fontSize="26" :maxCount="99" color="red" linear="top" @click="testPush">
						<view @click="gotoList('/pages/feed/list/list')" class="item">
							<tm-icon name="tmicon-ios-leaf" :font-size="70" />
							<tm-text class="title" label="喂食工单" :font-size="38"/>
						</view>
					</tm-badge>
					<tm-badge :count="subBadge.service" :fontSize="26" :maxCount="99" color="red" linear="top" @click="testPush">
						<view @click="gotoList('/pages/service/list/list')" class="item">

							<tm-icon name="tmicon-clock-fill" :font-size="70" />

							<tm-text   class="title" label="服务工单" :font-size="38" />
						</view>
					</tm-badge>

					<view @click="gotoList('/pages/treatment/list/list')" class="item">

							<tm-icon name="tmicon-new-releases" :font-size="70"></tm-icon>

						<tm-text class="title" label="猪仔治疗" :font-size="38"></tm-text>
					</view>
					<tm-badge :count="subBadge.comOut" :fontSize="26" :maxCount="99"
						color="red" linear="top" @click="testPush">
						<view @click="gotoList('/pages/out/list/list')" class="item">

								<tm-icon name="tmicon-left-arrow-rect" :font-size="70"></tm-icon>

							<tm-text class="title" label="出栏工单" :font-size="38"></tm-text>
						</view>
					</tm-badge>

					<view @click="gotoList('/pages/piglet/list/list')" class="item">

							<tm-icon name="tmicon-md-home" :font-size="70"></tm-icon>

						<tm-text  class="title" label="猪仔管理" :font-size="38"></tm-text>
					</view>
					<view v-if="isManage" @click="gotoList('/pages/staff/list/list')" class="item">

						<tm-icon name="tmicon-user-group-fill" :font-size="70"></tm-icon>

						<tm-text class="title" label="人员管理" :font-size="38"></tm-text>
					</view>
					<view v-if="isManage" @click="gotoList('/pages/allorder/list/list')" class="item">

						<tm-icon name="tmicon-ios-filing" :font-size="70"></tm-icon>

						<tm-text  class="title" label="所有工单" :font-size="38"></tm-text>
					</view>
					<tm-badge v-if="isManage" :count="subBadge.assign" :fontSize="26" :maxCount="99" color="red" linear="top" @click="testPush">
						<view @click="gotoList('/pages/share/list/list')" class="flex flex-row flex-betwee item">
							<tm-icon name="tmicon-terminal" :font-size="70" linear="right"	:linear-color="['#ea3c2d', '#ff9d14']"></tm-icon>
							<tm-text  class="title" label="分配工单" :font-size="38"></tm-text>
						</view>
					</tm-badge>



				</view>
			</view>

</view>
		<view style="position: absolute;bottom:0; width: 750rpx;">
			<tm-button _class="btn-style" block size="large" :height="90" :round="16" :shadow="0" :fontSize="34" label="退出系统" @click="exit"></tm-button>
		</view>
		
		<notif-and-mess ref="prompt"></notif-and-mess>
	
	</tm-app>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getInfo, getSubscript, getDetailJob,logout } from './resource/http'
	
	const prompt = ref(null)

	onShow(() => {
		getData()
	})


	const userInfo = ref(null)
	const isManage = ref(false)
	const subBadge = ref({})
	
	const completeStatus = ref({})
	

	// TODO管理员和普通用户请求的接口不同

	const getData = async () => {
		const { data } = await getSubscript()
		subBadge.value = data
		// 获取完成情况
		const res = await getDetailJob()
		completeStatus.value = res.data
	}


	const getUserInfo = async () => {
		const { data } = await getInfo()
		userInfo.value = data
		isManage.value = data.isManage
		uni.setStorage({ key: 'isManage', data: data.isManage });
	}
	getUserInfo()


	const exit = async () => {
		const res = await logout()
		if(res.code == 0){
			uni.removeStorageSync('accessToken')
			uni.removeStorageSync('isManage')
			uni.reLaunch({ url: '/pages/login/login' });
		}else{
			prompt.value.showNotif(res.message)
		}
		
	}

	const gotoList = (url) => {
		uni.navigateTo({
			url: url
		});
	}

	const badgeStyle = {
		width: '40rpx',
		height: '40rpx'
	}
	
	
	const testPush = () => {
		 wx.requestSubscribeMessage({
			  	//模板id，可以写多个
				tmplIds:['9G0M8FK1Aq5KF-mwI0KLpeVwmtmWayAD-DEl6vEtMAA'],
				//成功回调
				success(res){
			        console.log(res,'12成功');
			    },
			    //失败回调
			    fail(res){
			        console.log(res,'12失败');
			    }
		  	})
		
	}
</script>
<style scoped lang='less'>
	.bg {
		background-image: url('@/static/m1bg.webp');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #f4f6f6;
	}

	.header-card {
		height: 300rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		padding-top: 40rpx;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 20rpx;
	}

	.info-card {
		display: flex;
		padding: 0px 15px;
		flex-direction: row;
		align-items: center;

	}

	.exit {
		font-weight: 450;
		color: #333;
		//border: 1px solid #f1ebeb;
		border-radius: 30rpx;
		padding: 10rpx 35rpx;
		font-size: 27rpx;
		background-color: rgba(250, 220, 25, 0.93);

	}

	.menu-item {
		width: 170rpx;
		background-color: white;
		align-items: center;
	}

	.menu-icon-div {
		background-color: #1ac277;
		width: 35rpx;
		height: 35rpx;
		align-items: center;
	}

	.sheet {
		align-items: center;
	}


	.item {
		width: 260rpx;
		margin-bottom: 24rpx;
		background-color: rgba(121, 85, 72, 0.07);
		align-items: center;
		height: 100rpx;
		border: 1px solid #ffffff4a;
		border-radius: 16rpx;
		padding: 12rpx 24rpx;
		display: flex;
		justify-content: flex-start;
		.title {
			margin-left: 32rpx;
		}
	}

	.M1{

		height: 300rpx;
		z-index:30;

	}
	.M2{
		/* margin-top: 500rp3; */
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		/* background-color: #f4f6f6; */
	}
</style>
